<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>购物车</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <!-- 引入 axios -->
  <script src="config.js" ></script>
  <style>
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      margin: 20px;
      background-color: #f8f9fa;
    }
    #cart-list {
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    h1 {
      color: #333;
      text-align: center;
      margin-bottom: 30px;
    }
    .cart-item {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      padding: 15px;
      border: 1px solid #e9ecef;
      border-radius: 6px;
      background-color: #fff;
      transition: all 0.2s ease;
    }
    .cart-item:hover {
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      transform: translateY(-1px);
    }
    .cart-item span {
      flex: 1;
      margin-right: 20px;
      font-size: 16px;
      color: #495057;
    }
    .cart-item input {
      width: 60px;
      padding: 5px;
      text-align: center;
      border: 1px solid #dee2e6;
      border-radius: 4px;
    }
    .cart-item button {
      padding: 8px 12px;
      margin: 0 5px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.2s ease;
    }
    .cart-item button:not(.remove-btn) {
      background-color: #e9ecef;
      color: #495057;
    }
    .cart-item button:not(.remove-btn):hover {
      background-color: #dee2e6;
    }
    .remove-btn {
      color:wheat;
      background-color: #9a6bff;
    }
    .remove-btn:hover {
      background-color: #654dff;
    }
    .total-section {
      margin-top: 30px;
      padding: 20px;
      background-color: #f8f9fa;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .total-section span {
      font-size: 20px;
      font-weight: bold;
      color: #333;
    }
    .clear-btn {
      color: wheat;
      background-color: #6b72ff;
      padding: 10px 20px;
      font-size: 16px;
    }
    .clear-btn:hover {
      background-color: #4d56ff;
    }
  </style>
</head>
<body>
  <div id="cart-list">
    <div style="display: flex; justify-content: space-between; align-items: center;">
      <h1>我的购物车</h1>
      <a href="search.html" style="text-decoration: none;">
        <button style="background-color: #6b72ff; color: wheat; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer;">
          返回搜索
        </button>
      </a>
    </div>
    <div v-for="item in cartItems" :key="item.cartId" class="cart-item">
      <span>{{ item.productName }}</span>
      <input type="number" v-model="item.quantity" @change="updateQuantity(item)">
    </div>

    <div class="total-section">
      <span>总计：￥{{ totalPrice }}</span>
    </div>
  </div>


</body>
</html>
<script>
  new Vue({
    el: '#cart-list',
    data() {
      return {
        cartItems: [],
        totalPrice: 0
      }
    },
    mounted() {
      this.fetchCartData();
    },
    methods: {
      // 获取购物车数据
      async fetchCartData() {
        try {
          const response = await axiosInstance.get('/cart/list');
          console.log(response);
          this.cartItems = response.data.data.cartVO;
          console.log(response.data.data);
          this.totalPrice = response.data.data.totalPrice;
        } catch (error) {
          console.error('获取购物车数据失败:', error);
          alert('获取购物车数据失败');
        }
      },
      // 更新商品数量
      async updateQuantity(item) {
        try {
            await axiosInstance.put(`/cart/quantity?cartId=${item.cartId}&quantity=${item.quantity}`);
            this.calculateTotal(); // 更新数量后重新计算总价
        } catch (error) {
            console.error('更新数量失败:', error);
            alert('更新数量失败');
        }
      },
      // 计算总价
      calculateTotal() {
          this.totalPrice = this.cartItems.reduce((total, item) => {
              return total + (item.price * item.quantity);
          }, 0);
      },


      // 减少数量
      async decreaseQuantity(item) {
        if (item.quantity > 1) {
          item.quantity--;
          await this.updateQuantity(item);
        }
      },
      // 增加数量
      async increaseQuantity(item) {
        item.quantity++;
        await this.updateQuantity(item);
      },
    }
  });
</script>